<nz-card class="m-b-2">
  <div class="zdy-seach-wrap">
    <div nz-space class="seach-content">
      <div *nzSpaceItem class="seach-item">
        <label class="seach-label">综合搜索</label>
        <div class="seach-control">
          <input nz-input placeholder="用户ID/手机号码/ID" [(ngModel)]="seachParams.num" />
        </div>
      </div>

      <div *nzSpaceItem class="seach-item">
        <label class="seach-label">发生时间</label>
        <div class="seach-control">
          <nz-range-picker [(ngModel)]="dateArrs" (ngModelChange)="timeChange($event)"></nz-range-picker>
        </div>
      </div>

      <div *nzSpaceItem class="seach-item">
        <label class="seach-label">审核状态</label>
        <div class="seach-control">
          <nz-select nzAllowClear nzPlaceHolder="全部" [(ngModel)]="seachParams.auditStatus">
            <nz-option nzLabel="待审核" nzValue="0"></nz-option>
            <nz-option nzLabel="审核通过" nzValue="1"></nz-option>
            <nz-option nzLabel="审核不通过" nzValue="2"></nz-option>
          </nz-select>
        </div>
      </div>

      <div *nzSpaceItem class="seach-item">
        <button nz-button nzType="primary" [nzLoading]="tableParams.tableLoading" class="m-r-8" (click)="seachData()">查询</button>
        <button nz-button nzType="default" (click)="resetData()">重置</button>
      </div>
    </div>
  </div>
</nz-card>

<nz-card>
  <div class="opera-wrap p-b-10">
    <button
      nz-button
      nzType="primary"
      class="m-r-10"
      (click)="showModal()">
      <i nz-icon nzType="plus" nzTheme="outline"></i>爱豆充值
    </button>

    <nz-upload
      nzAction=""
      [nzShowUploadList]="false"
      [nzCustomRequest]="uploadCustomRequest"
    >
      <button nz-button nzType="primary">
        <i nz-icon [nzType]="grantIdolLoading ? 'loading' : 'upload'"></i>
        批量发放爱豆
      </button>
    </nz-upload>

    <a
      nz-button
      nzType="link"
      nzDanger
      class="m-l-5"
      href="https://i5-test.oss-cn-shenzhen.aliyuncs.com/idol/idolTemplate.xlsx"
      download
    >发放爱豆模板下载</a>
  </div>

  <!-- Table -->
  <div class="pagination-wrap-position">
    <div class="table-wrap">
      <nz-table
        #basicTable
        nzSize="small"
        nzShowSizeChanger
        nzShowQuickJumper
        nzOuterBordered
        [nzFrontPagination]="false"
        [nzLoadingDelay]="100"
        [nzLoading]="tableParams.tableLoading"
        [nzData]="tableData"
        [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
        [nzTotal]="tableParams.total"
        [nzPageIndex]="tableParams.page"
        [nzPageSize]="tableParams.pageSize"
        [nzShowTotal]="totalTemplate"
        (nzPageIndexChange)="onPageIndexChange($event)"
        (nzPageSizeChange)="onPageSizeChange($event)"
      >
        <thead>
          <tr>
            <th nzAlign="center" nzWidth="120px">ID</th>
            <th nzAlign="center" nzWidth="120px">用户ID</th>
            <th nzAlign="center">手机号码</th>
            <th nzAlign="center">标题</th>
            <th nzAlign="center">爱豆</th>
            <th nzAlign="center">收支类型</th>
            <th nzAlign="center">发生时间</th>
            <th nzAlign="center">审核状态</th>
            <th nzAlign="center">到账时间</th>
            <th nzAlign="center">备注</th>
            <th nzAlign="center">操作</th>
          </tr>
        </thead>

        <tbody>
          <tr *ngFor="let data of basicTable.data; let index = index;">
            <!-- ID -->
            <td nzAlign="center">{{ data.id }}</td>
            <!-- 用户ID -->
            <td nzAlign="center">{{ data.userId }}</td>
            <!-- 手机号码 -->
            <td nzAlign="center">{{ data.phone || '-' }}</td>
            <!-- 标题 -->
            <td nzAlign="center">{{ data.title || '-' }}</td>
            <!-- 爱豆 -->
            <td nzAlign="center">{{ (data.number > 0 ? '+' + data.number : data.number) || '0' }}</td>
            <!-- 收支类型 -->
            <td nzAlign="center">人工调整</td>
            <!-- 发生时间 -->
            <td nzAlign="center">{{ data.createTime || '-' }}</td>
            <!-- 审核状态 -->
            <td nzAlign="center">
              <span [ngStyle]="{'color': data.auditStatus | idoAuditStatus: 'color'}">
                {{ data.auditStatus | idoAuditStatus: 'text' }}
              </span>
            </td>
            <!-- 到账时间 -->
            <td nzAlign="center">{{ data.arrivalTime || '-' }}</td>
            <!-- 备注 -->
            <td nzAlign="center">{{ data.remarks || '-' }}</td>
            <!-- 操作 -->
            <td nzAlign="center">
              <ng-container *ngIf="data.auditStatus == 0;else templateExamine">
                <button nz-button nzType="link" (click)="showExamine(data)">审核</button>
              </ng-container>
              <ng-template #templateExamine>-</ng-template>
            </td>
          </tr>
        </tbody>
      </nz-table>

      <!-- 分页template -->
      <ng-template #totalTemplate let-total>共有 {{ tableParams.total }} 条</ng-template>
    </div>
  </div>
</nz-card>

<!-- 爱豆充值 Modal START -->
<nz-modal
  nzClassName="custom-model-wrap"
  nzWidth="600px"
  [nzFooter]="null"
  [(nzVisible)]="isVisible"
  nzTitle="爱豆充值"
  (nzOnCancel)="handleCancel()">

  <div *nzModalContent>
    <div class="custom-model-body">
      <!-- body START -->
      <form nz-form class="modal-body" [formGroup]="validateForm">
        <nz-form-item>
          <nz-form-label nzSpan="6" nzRequired>用户</nz-form-label>
          <nz-form-control nzSpan="18" nzErrorTip="请输入待充值用户ID!">
            <input nz-input placeholder="请输入待充值用户ID" formControlName="userId" />
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label nzSpan="6" nzRequired>爱豆（个）</nz-form-label>
          <nz-form-control nzSpan="18" nzErrorTip="请输入爱豆个数!">
            <nz-input-number formControlName="number" [nzStep]="1" [nzPrecision]="0" nzPlaceHolder="请输入充值数量，输入负号将会扣除对应用户爱豆"></nz-input-number>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label nzSpan="6" nzRequired>标题</nz-form-label>
          <nz-form-control nzSpan="18" nzErrorTip="请输入标题!">
            <input nz-input placeholder="该标题将在客户端显示" formControlName="title" />
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label nzSpan="6">备注</nz-form-label>
          <nz-form-control nzSpan="18">
            <nz-textarea-count [nzMaxCharacterCount]="100">
              <textarea rows="4" maxlength="100" formControlName="remarks" nz-input placeholder="请输入备注"></textarea>
            </nz-textarea-count>
          </nz-form-control>
        </nz-form-item>
      </form>
      <!-- body END -->
    </div>

    <div class="custom-model-foot">
      <div class="custom-foot-cont">
        <button nz-button nzType="primary" (click)="submitForm()">确认</button>
        <button nz-button nzType="default" (click)="handleCancel()">取消</button>
      </div>
    </div>
  </div>
</nz-modal>
<!-- 爱豆充值 Modal END -->

<!-- 审核 Modal START -->
<nz-modal
  [(nzVisible)]="isExamineVisible"
  nzTitle="审核"
  [nzFooter]="null"
  (nzOnCancel)="isExamineVisible = false">
  <ng-container *nzModalContent>
    <div class="examine-wrap">
      <button nz-button nzType="primary" (click)="submitExamine(1)">通过</button>
      <button nz-button nzType="primary" nzDanger (click)="submitExamine(2)">不通过</button>
      <button nz-button nzType="default" (click)="isExamineVisible = false">取消</button>
    </div>
  </ng-container>
</nz-modal>
<!-- 审核 Modal END -->

